<template>
  <div class="bg-white">
    <van-nav-bar
      :title="'当前城市 - ' + $store.state.cityName"
      @click-left="$router.back()"
      :fixed="true"
      z-index="100"
    >
      <template #left>
        <van-icon name="cross" :color="'#191a1b'" style="font-size: 24px;" />
      </template>
    </van-nav-bar>
    <div class="recommend-city">
      <div class="gprs-city">
        <div class="city-index-title">GPS定位你所在城市</div>
        <ul class="city-index-detail clearfix">
          <li class="city-item-detail city-item-detail-gprs">
            <div class="city-item-text">定位失败</div>
          </li>
        </ul>
      </div>
      <div class="hot-city">
        <div class="city-index-title">热门城市</div>
        <ul class="city-index-detail clearfix">
          <li class="city-item-detail"><div class="city-item-text">北京</div></li>
          <li class="city-item-detail"><div class="city-item-text">上海</div></li>
          <li class="city-item-detail"><div class="city-item-text">广州</div></li>
          <li class="city-item-detail"><div class="city-item-text">深圳</div></li>
        </ul>
      </div>
    </div>
    <van-index-bar :index-list="computedCityList" @select="handleSelect" :sticky-offset-top="100" style="padding-top: 94px;">
      <div v-for="data in cityList" :key="data.type">
        <van-index-anchor :index="data.type"></van-index-anchor>
        <van-cell :title="item.name" v-for="(item, index) in data.list" :key="index" @click="handleChangePage(item)" />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import Vue from 'vue'
// import http from '@/utils/http'
import { mapMutations } from 'vuex'
import { IndexBar, IndexAnchor, Cell, Toast, Icon, NavBar } from 'vant'

import cityData from '@/assets/js/city.json'

Vue.use(IndexBar).use(IndexAnchor).use(Cell).use(Toast).use(Icon)
Vue.use(NavBar)

export default {
  name: 'City',
  data () {
    return {
      cityList: [
        // {
        //   type: 'A',
        //   list: [1,2,3,4]
        // },
        // {
        //   type: 'B',
        //   list: [1,2,3,4]
        // }
      ]
    }
  },
  computed: { // 计算属性存在的意义：定义起来像函数，使用起来像属性
    computedCityList () {
      return this.cityList.map(item => item.type)
    }
  },
  methods: {
    ...mapMutations('CityMoudle', ['changeCityName', 'changeCityId']),
    handleCityData (cities) {
      // 输入原始数据，输出的是目标数据
      const letterArr = []
      const newCities = []
      for (let code = 65; code < 91; code++) {
        // console.log(String.fromCharCode(code))
        letterArr.push(String.fromCharCode(code))
      }
      letterArr.forEach((letter) => {
        const list = cities.filter(item => item.pinyin.substring(0, 1).toUpperCase() === letter)
        if (list.length > 0) {
          newCities.push({
            type: letter,
            list
          })
        }
      })
      return newCities
    },
    handleSelect (index) {
      Toast({
        message: index,
        duration: 1000,
        className: 'toastLetter'
      })
    },
    handleChangePage (item) {
      // cityId cityName
      // this.$store.commit('changeCityName', item.name)
      // this.$store.commit('changeCityId', item.cityId)
      this.changeCityName(item.name)
      this.changeCityId(item.cityId)
      this.$router.back()
    }
  },
  mounted () {
    this.cityList = this.handleCityData(cityData)
    // http({
    //   url: '/gateway?k=1927426',
    //   headers: {
    //     'X-Host': 'mall.film-ticket.city.list'
    //   }
    // }).then((response) => {
    //   let res = response.data
    //   if(res.status === 0) {
    //     let data = res.data.cities
    //     console.log(JSON.stringify(data))
    //   }
    // })
  }
}
</script>
<style lang="scss">
.toastLetter {
  min-width: 20px!important;
}
.city-item-text {
  height: .3rem;
  line-height: .3rem;
  margin: 0 .07rem;
  font-size: .14rem;
  color: #191a1b;
  background-color: #f4f4f4;
  border-radius: .03rem;
}
.city-index-detail {
  li {
    float: left;
  }
}
</style>
